<template>
  <div v-loading="loading">
    <el-table
      :data="scheduleList"
      style="width: 100%"
      :height="tableHeight"
      empty-text="查询条件下没有找到记录"
    >
      <el-table-column prop="Date" label="日期" width="120" />
      <el-table-column label="任教" width="100">
        <template #default="s">{{ s.row.Teacher?._v }}</template>
      </el-table-column>
      <el-table-column prop="DseClass" label="班级" width="130">
        <template #default="s">{{ s.row.DseClass._v }}</template>
      </el-table-column>
      <el-table-column prop="Course" label="课程" width="150">
        <template #default="s">{{ s.row.Course._v }}</template>
      </el-table-column>
      <el-table-column label="时间" width="120">
        <template #default="s">{{ s.row.Start }}-{{ s.row.End }}</template>
      </el-table-column>
      <el-table-column prop="Note" label="备注" width="300" />
    </el-table>
    <div v-loading="loading" class="my_opt_btn_pannel">
      <div style="text-align: left">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          v-model:current-page="pageIndex"
          @current-change="doSearch"
        />
      </div>
      <div style="text-align: right; padding-right: 20px">
        <el-button @click="searchVisable = true">搜索</el-button>
        <el-button @click="doSearch()">刷新</el-button>
        <el-button v-loading="exporting" @click="exportToXls()">导出</el-button>
      </div>
    </div>
    <el-dialog v-model="searchVisable" title="搜索条件" width="600">
      <el-form :model="search">
        <el-form-item label="月份">
          <el-date-picker clearable style="width: 300px" v-model="search.s_Date" type="month" />
        </el-form-item>
        <el-form-item label="教师">
          <el-select clearable style="width: 300px" filterable v-model="search.s_Teacher">
            <el-option
              v-for="item in allUser"
              :key="item.Pk"
              :value="item.Pk"
              :label="item.UserName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select clearable style="width: 300px" filterable v-model="search.s_DseClass">
            <el-option
              v-for="item in allDseClass"
              :key="item.Pk"
              :value="item.Pk"
              :label="item.ClassName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { listSchedule } from '@/api/schedule'
import type { ScheduleModel } from '@/type/Schedule'
import { computed, onMounted, reactive, ref } from 'vue'
import { formatDate, useWindowSize } from '@vueuse/core'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { dateFormat } from '@/utils/stringUtils'
import type { UserModel } from '@/type/User'
import { listUser } from '@/api/user'
import { listDseClass } from '@/api/dseclass'
import type { DseClassModel } from '@/type/DseClass'
import { exportToExcle, extractKvValue } from '@/utils/objUtils'

const exporting = ref(false)
const allUser = ref<UserModel[]>([])
const allDseClass = ref<DseClassModel[]>([])
const userStore = useUserStore()
const searchVisable = ref(false)
const pageSize = ref(50)
const pageIndex = ref(1)
const totalCount = ref(0)
const winSize = useWindowSize()
const loading = ref(false)
const scheduleList = ref<ScheduleModel[]>()
const tableHeight = computed(() => winSize.height.value - 60 - 8 - 42) //60是MENU,8是PADDING-TOP，42是按钮区
const router = useRouter()
const search = reactive({
  s_Date: new Date(),
  s_Teacher: undefined,
  s_DseClass: undefined,
})
onMounted(async () => {
  await doSearch()
  const cond: any = { pageSize: 10000 }
  if (!userStore.isAdm) cond.S_Pk = `eq(${userStore.userId})`
  allUser.value = (await listUser(cond)).Data
  allDseClass.value = (await listDseClass({ pageSize: 10000 })).Data
})
const doSearch = async () => {
  searchVisable.value = false
  try {
    loading.value = true

    const r = await listSchedule(makeCond())
    r.Data.sort((a, b) => a.Date!.localeCompare(b.Date!))
    scheduleList.value = r.Data
    totalCount.value = r.TotalCount
  } finally {
    loading.value = false
  }
}
const makeCond = () => {
  const d = dateFormat(search.s_Date).substring(0, 7)
  const cond: any = {
    S_Date: `lk(${d}%)`,
    pageIndex: pageIndex.value - 1,
    pageSize: pageSize.value,
  }
  if (search.s_Teacher) {
    cond.S_Teacher = `eq(${search.s_Teacher})`
  }
  if (!userStore.isAdm) cond.S_Teacher = `eq(${userStore.userId})`
  if (search.s_DseClass) {
    cond.S_DseClass = `eq(${search.s_DseClass})`
  }
  return cond
}
const exportToXls = async () => {
  exporting.value = true
  const cond = makeCond()
  cond.pageSize = 10000
  try {
    const data = (await listSchedule(cond)).Data
    const excelData = [['日期', '任教', '课程', '班级', '时间', '备注']]
    data.forEach((item) =>
      excelData.push([
        item.Date!,
        extractKvValue(item.Teacher, '')!,
        extractKvValue(item.Course, '')!,
        extractKvValue(item.DseClass, '')!,
        `${item.Start}-${item.End}`,
        item.Note || '',
      ]),
    )
    exportToExcle(excelData)
  } finally {
    exporting.value = false
  }
}
</script>
